<template>
  <el-button
  type="primary"
  :icon="Fold"
  size="small"
  @click="foldpush"
  
  />

  <el-menu 
  active-text-color="#ffd04b" 
  background-color="rgb(95, 114, 253)" 
  class="el-menu-vertical-demo"
  default-active="dept" 
  :default-openeds="['group1']"
  text-color="rgb(253, 253, 255)" 
  @open="handleOpen" 
  @close="handleClose"
  router
  :collapse="isCollapsed"
  >
    <el-sub-menu index="group1" >
      <template #title>
        <el-icon>
          <Setting />
        </el-icon>
        <span>系统不理</span>
      </template>
      <el-menu-item index="dept">部门管理</el-menu-item>
      <el-menu-item index="job">岗位管理</el-menu-item>
      <el-menu-item index="emp">员工管理</el-menu-item>
      
    
      <el-sub-menu index="1-4">
        <template #title>item four</template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>

  </el-menu>
</template>
  
<script  setup>
import {
  Fold,
  Setting,
} from '@element-plus/icons-vue'
import{ref} from "vue"


const isCollapsed=ref(false);

const emits=defineEmits(['foldchange'])
const foldpush=()=>{
  isCollapsed.value=!isCollapsed.value;
  console.log("子组件提交了");
  emits('foldchange',isCollapsed.value);
}
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>
  
<style lang="scss" scoped>
.el-button {
  width: 100%;
}
.el-menu {
  border-right: 0px solid;
}
</style>